<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>word-space、word-break、white-space</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    span {
      font-size: 2em;
    }

    #container{
      height: 100%;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      place-content: center;
      place-items: center;
    }

    .item {
      font-size: 1em;
      border: 1px solid #e5e4e9;
      width: 200px;

      /* 强行换行，单词不连续 */
      /* word-wrap: break-word;  */


      /*连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。 */
      /* white-space: normal;  */
      /* 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。*/
      /* white-space: nowrap;  */
      /* 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。*/
      /* white-space: pre; */
      /* 连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充line盒子时才会换行。*/
      /* white-space: pre-wrap; */
      /* 连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充line盒子时会换行。*/
      /* white-space: pre-line; */
      
      /* 可用来text area 换行显示 */
      /* white-space: break-spaces; */
      /**
          与 pre-wrap的行为相同，除了：
          任何保留的空白序列总是占用空间，包括在行尾。
          每个保留的空格字符后都存在换行机会，包括空格字符之间。
          这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。
      */
      
      /* white-space: inherit;
      white-space: initial; */


      /* word-break  break-word normal */
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="item">
      这是一个很长的单词qwertyuiopadsdfghjhjsdfsgfsafasdafdasedfas
      dfsdfsdfk哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>
  </div>
</body>
</html>